<template>
	<view class="login">
		<u-navbar title="中新汇算管理端" :border-bottom="false"></u-navbar>
		<view>
			<img src="../../static/logo.png" alt="" class="logo" />
		</view>
		<view>
			<!-- <img src="../../static/name.png" alt="" class="name" /> -->
		</view>
		<view class="name_box">
			<img src="../../static/suo.png" alt="" class="img" />
			<input type="text" class="input" v-model="username" placeholder="输入登录帐号" />
		</view>
		<view class="name_box password_box">
			<img src="../../static/suo.png" alt="" class="img" />
			<input type="password" class="input" v-model="password" placeholder="输入帐号密码" />
		</view>
		<view class="bt" @click="login">登录</view>
		<view class="text">如忘记帐号或密码，请联系对接商务经理</view>
	</view>
</template>

<script>
import _ from 'lodash';
import { operLogin } from '../../libs/axios.js';
export default {
	data() {
		return {
			username: '',
			password: ''
		};
	},
	methods: {
		login: _.debounce(
			async function () {
				let info = await operLogin({
					username: this.username,
					password: this.password
				});
				uni.setStorageSync('user', info.data);
				uni.showToast({
					title: '登录成功',
					icon: 'success',
					duration: 2000
				});
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/home/home'
					});
				}, 2000);
			},
			1000,
			{
				leading: true, //在延迟开始前立即调用事件
				trailing: false //在延时结束后不调用,保证事件只被触发一次
			}
		)
	}
};
</script>

<style lang="scss">
.login {
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	text-align: center;
	.logo {
		width: 400rpx;
		height: 400rpx;
		margin-top: 76rpx;
	}
	.name {
		width: 258rpx;
		height: 74rpx;
		margin-top: 30rpx;
	}
	.name_box {
		width: 600rpx;
		height: 88rpx;
		border-radius: 100rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(221, 221, 221, 1);
		margin: 92rpx auto 0 auto;
		padding: 26rpx 44rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: #222222;
		.img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 28rpx;
		}
		.input {
			border: none;
			background: none;
			text-align: left;
		}
	}
	.password_box {
		margin: 40rpx auto 0 auto;
	}
	.bt {
		width: 604rpx;
		height: 84rpx;
		border-radius: 196rpx;
		border: 2rpx solid rgb(255, 67, 73);
		background: rgb(255, 67, 73);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 40rpx auto 0 auto;
	}
	.text {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(119, 119, 119, 1);
		margin-top: 52rpx;
		text-align: center;
	}
}
</style>
